<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Mock Slack - Login</title>
  </head>
  <body>
    <center>
      <h1>Login</h1>
      <h3>Select an existing user, or create a new one.</h3>
      <hr />
      <script>
        function newUserChange(e) {
          if (!e.target.checked) {
            document
              .getElementById('newUserName')
              .setAttribute('disabled', 'disabled')
          } else {
            document.getElementById('newUserName').removeAttribute('disabled')
          }
        }
      </script>
      <form method="POST">
        {{- range $key, $value := .Data }}
          <input
            name="{{ $key }}"
            type="hidden"
            value="{{ StringsJoin $value " " }}"
          />
        {{- end }}
        {{ range .Users }}
          <label
            ><input
              type="radio"
              name="userID"
              value="{{ .ID }}"
            />{{ .Name }}</label
          ><br />
        {{ end }}
        <br />
        <label
          ><input
            type="radio"
            name="userID"
            value="new"
            onchange="newUserChange"
          />+ Create New User</label
        >
        <br />
        <label
          >New User Name:
          <input id="newUserName" type="text" name="newUserName"
        /></label>

        <input id="action" type="hidden" name="action" value="login" />
        <hr />
        <button
          type="submit"
          style="color: gray; width: 20%; height: 2em; font-size: 3em"
          onclick="document.getElementById('action').setAttribute('value', 'cancel')"
        >
          Cancel
        </button>
        <button
          type="submit"
          style="
            background-color: green;
            width: 20%;
            height: 2em;
            font-size: 3em;
          "
        >
          Login
        </button>
      </form>
    </center>
  </body>
</html>
